<template>
  <div class="selectAddress">
    <div class="container">
      <div class="address_tittle">
        <img src="../../../assets/images/FrameBlue.png" alt="" />
      </div>

      <div class="address_list">
        <div class="corporateCompony">
          <div class="corporate_tittle">对公转账</div>
          <div class="corporate_tittle">
            公司名称：{{ transferInfo.account_name }}
          </div>
          <div class="corporate_tittle">
            开户银行：{{ transferInfo.account_bank }}
          </div>
          <div class="corporate_tittle">
            银行账号：{{ transferInfo.account_no }}
          </div>
        </div>
        <div class="pay_info">
          <div>
            如您使用对公打款，请一定要联系【杭州易可易科技有限公司】，确保对方收到款项
          </div>
          <div>请确保您已经打款，再点击【我已转账】按钮</div>
        </div>

        <div class="footer_button">
          <el-button class="qxSubmit" @click="onTransferCancel">取消</el-button>
          <el-button class="ydSubmit" @click="onTransferConfirm"
            >我已转账</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Edit, Iphone, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import enterpriseCenterApi from "@/api/enterprise-center";
import { TransferForGuarantee } from "@/api/barterhall";
const router = useRouter();
const route = useRoute();
const transferInfo = ref({
  account_name: "",
  account_bank: "",
  account_no: "",
});

const payInfo = ref({
  id: "",
  type: "",
});

onMounted(() => {
  payInfo.value.id = route.query.id;
  payInfo.value.type = route.query.type;
  getTransferInfo();
});

// 获取转账信息
const getTransferInfo = () => {
  enterpriseCenterApi.payAccount().then((res) => {
    if (res.code == 1) {
      transferInfo.value = {
        account_name: res.data.account_name,
        account_bank: res.data.account_bank,
        account_no: res.data.account_no,
      };
    }
  });
};

// 取消&&确认转账
const onTransferCancel = () => {
  router.back();
};
const onTransferConfirm = () => {
  if (payInfo.value.type == 1) {
    enterpriseCenterApi
      .authorTransfer({ order_id: payInfo.value.id })
      .then((res) => {
        router.push("/enterprise-center");
      });
  } else if (payInfo.value.type == 2) {
    TransferForGuarantee({ order_id: payInfo.value.id }).then((res) => {
      if (res.code == 1) {
        ElMessage({ message: res.msg, type: "success" });
        router.push("/my-easy");
      }
    });
  } else if (payInfo.value.type == 3) {
    enterpriseCenterApi
      .transferForRepay({ order_id: payInfo.value.id })
      .then((res) => {
        router.push("/easy-quota");
      });
  } else if (payInfo.value.type == 4) {
    enterpriseCenterApi
      .transferForPay({ order_id: payInfo.value.id })
      .then((res) => {
        router.push("/easy-mine");
      });
  }
};
</script>

<style scoped lang="less">
.el_radioInfo {
  // border: 1px solid red;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(.el-radio-group) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-radio__label) {
  width: 100%;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.default_address {
  margin-right: 17px;
  margin-left: 17px;
}
.el_button {
  // margin-right: 17px;
  width: 92px;
  height: 34px;
  background: #2487e8;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.selectAddress {
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;

  .container {
    width: 821px;
    height: 500px;
    margin-top: 30px;
    .address_tittle {
      width: 100%;
      height: 62px;
      line-height: 62px;
      text-align: center;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      font-size: 24px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
      img {
        width: 135px;
        height: 50px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
    }
    .pay_info {
      display: flex;
      flex-direction: column;
      margin-top: 34px;
      font-size: 12px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #18bc9f;
      line-height: 36px;
      width: 521px;
      margin: 30px auto;
    }
    .address_list {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      //   margin-top: 34px;
      .corporateCompony {
        width: 497px;
        height: 174px;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #e6e6e6;
        margin: 0 auto;
        padding: 16px 12px;
        .corporate_tittle {
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.87);
          height: 28px;
          line-height: 28px;
          margin: 16px 0;
        }
        .corporate_tittle:first-child {
          height: 42px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border-bottom: 1px solid #e6e6e6;
          margin-top: 0;
        }
      }
      .footer_button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 34px auto;
      }
      .qxSubmit {
        width: 140px;
        height: 42px;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid rgba(0, 0, 0, 0.6);
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.6);
      }
      .ydSubmit {
        width: 140px;
        height: 42px;
        background: #e84026;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}
#app {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
</style>
